<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form id="form1">
	<table width="860px" height="400px" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#AEDEF4" style="margin:13px">
		<tr>
			<td align="center" bgcolor="#E2F7FE">
				<table width="90%" border="0" cellspacing="1" cellpadding="3">
					<tr style="height: 50px">
						<td  align="right"><strong>矫正单位：</strong></td>
						<td  align="left" >
							<input id="jid" name="jid" data-options="prompt:'请选择矫正单位'" style="width: 220px; height: 30px;" />
						</td>
						<td  align="right"><strong>人员类别：</strong></td>
						<td align="left" >
							<input id="category" name="category" data-options="prompt:'请选择人员类别'" style="width: 220px; height: 30px;" />
						</td>
						<td width="130px" rowspan="4" align="center">
							<div style="border:1px gray solid;width:92%;height:160px" id="img"></div>
							<input type="button" onclick="$('#file').click()" value="请选择照片" style="width:95%"/>
						</td>
					</tr>
					<tr style="height: 50px">
						<td align="right"><strong>姓名：</strong></td>
						<td align="left"><input name="name" class="easyui-textbox" data-options="prompt:'请输入姓名',required:true" style="width: 220px; height: 30px"/></td>
						<td align="right"><strong>证件号码：</strong></td>
						<td align="left"><input name="card" class="easyui-textbox" data-options="prompt:'请输入证件号码',required:true,validType:'cardNum'" style="width: 220px; height: 30px"/></td>
					</tr>
					<tr style="height: 50px">
						<td align="right"><strong>性别：</strong></td>
						<td align="left" >
							<input id="sex" name="sex" data-options="prompt:'请选择性别'" style="width: 220px; height: 30px;" />
						</td>
						<td align="right"><strong>出生日期：</strong></td>
						<td align="left">
							<input name="birthday" class="laydate-icon" onclick="laydate()
							" placeholder=" 请选择日期" style="width: 198px; height: 30px;border: 1px solid #95B8E7;-webkit-border-radius: 5px 5px 5px 5px;" />
						</td>
					</tr>
					<tr style="height: 50px">
						<td align="right"><strong>学历：</strong></td>
						<td align="left" >
							<input id="degree" name="degree" data-options="prompt:'请选择学历'" style="width: 220px; height: 30px;" />
						</td>
						<td align="right"><strong>职业：</strong></td>
						<td align="left" >
							<input name="profession" class="easyui-textbox" data-options="prompt:'请输入职业'" style="width: 220px; height: 30px" />
						</td>
					</tr>
					<tr style="height: 50px">
						<td align="right"><strong>政治面貌：</strong></td>
						<td align="left" >
							<input id="politic" name="politic" data-options="prompt:'请选择政治面貌'" style="width: 220px; height: 30px;" />
						</td>
						<td align="right"><strong>联系电话：</strong></td>
						<td align="left"><input name="phonenum" class="easyui-textbox" data-options="prompt:'请输入联系电话',validType:'phoneNum'" style="width:220px; height:30px"  /></td>
						<td align="left"><strong>状态：</strong><input name="status" class="easyui-textbox" data-options="prompt:'请输入状态'" style="width: 80px; height: 30px"/> </td>
					</tr>
					<tr style="height: 50px">
						<td align="right"><strong>工作单位：</strong></td>
						<td align="left" colspan="4"><input name="org" class="easyui-textbox" data-options="prompt:'请输入工作单位'" style="width:680px; height: 30px"  /></td>
					</tr>
					<tr style="height: 50px">
						<td align="right"><strong>家庭地址：</strong></td>
						<td align="left" colspan="4"><input name="address" class="easyui-textbox" data-options="prompt:'请输入家庭地址'" style="width:680px; height: 30px"  /></td>
					</tr>
				</table>
				<input type="file" id="file" hidden="true" name="file">
			</td>
		</tr>
	</table>
</form>
<script>
	$('#jid').combobox({    
	    url:'${request.contextPath}/judicialDeptment/queryAll',    
	    valueField:'id',    
	    textField:'name',
	    panelHeight:'150px',
	    loadFilter:function(res){
	    	var value=res.data;
	    	return value;
	    }
	});
	$('#category').combobox({    
		valueField:'id',    
	    textField:'text',
	    panelHeight:'150px',
		data: [{
			id: '专职社会工作者',
			text: '专职社会工作者'
		}]
	});
	$('#sex').combobox({    
		valueField:'id',    
	    textField:'text',
	    panelHeight:'50px',
		data: [{
			id: '男',
			text: '男'
		},{
			id: '女',
			text: '女'
		}]
	});
	$('#degree').combobox({    
		valueField:'id',    
	    textField:'text',
	    panelHeight:'150px',
		data: [{
			id: '小学',
			text: '小学'
		},{
			id: '初中',
			text: '初中'
		},{
			id: '高中',
			text: '高中'
		},{
			id: '专科',
			text: '专科'
		},{
			id: '本科',
			text: '本科'
		},{
			id: '硕士以上',
			text: '硕士以上'
		},{
			id: '其他',
			text: '其他'
		}]
	});
	$('#politic').combobox({    
		valueField:'id',    
	    textField:'text',
	    panelHeight:'150px',
		data: [{
			id: '群众',
			text: '群众'
		},{
			id: '团员',
			text: '团员'
		},{
			id: '党员',
			text: '党员'
		},{
			id: '其他',
			text: '其他'
		}]
	});
	$("#file").bind("change",function(){
		if (this.files && this.files[0]) {
	        var reader = new FileReader();
	        reader.onload = function(evt) {
	            $('#img').html('<img src="' + evt.target.result + '" style="width:100%;height:100%" />');
	        }
	        reader.readAsDataURL(this.files[0]);
	    } else {
	    	$('#img').html('<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + $("#file").val() + '\'"></div>');
	    }
	});
</script>
</body>
</html>